<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据的收集</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <form @submit.prevent="send">
            用户名：<input type="text" v-model.trim="user.username"><br><br>
            密码：<input type="password" v-model="user.password"><br><br>
            年龄：<input type="number" v-model.number="user.age"><br><br>
            性别：
                男<input type="radio" name="gender" value="1" v-model="user.gender">
                女<input type="radio" name="gender" value="0" v-model="user.gender"><br><br>
            爱好：
            <!-- 注意：对于checkbox来说，如果没有手动指定value，那么会拿这个标签的checked属性的值作为value -->
                旅游<input type="checkbox" v-model="user.interest" value="travel">
                运动<input type="checkbox" v-model="user.interest" value="sport">
                唱歌<input type="checkbox" v-model="user.interest" value="sing"><br><br>
            学历：
                <select v-model="user.grade">
                    <option value="">请选择学历</option>
                    <option value="zk">专科</option>
                    <option value="bk">本科</option>
                    <option value="ss">硕士</option>
                </select><br><br>
            简介：
                <textarea cols="50" rows="15" v-model.lazy="user.introduce"></textarea><br><br>
            <input type="checkbox" v-model="user.accept">阅读并接受协议<br><br>
            <!-- <button @click.prevent="send">注册</button> -->
            <button>注册</button>
        </form>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                user : {
                    username : '',
                    password : '',
                    age : '',
                    gender : '1',
                    interest : ['travel'],
                    grade : 'ss',
                    introduce : '',
                    accept : ''
                },
                msg : '表单数据的收集'
            },
            methods : {
                send(){
                    alert('ajax...!!!!')
                    // 将数据收集好，发送给服务器。
                    //console.log(JSON.stringify(this.$data))
                    console.log(JSON.stringify(this.user))
                }
            }
        })
    </script>
</body>
</html>